<template>
  <el-tabs type="card" v-model="activeName">
    <el-tab-pane label="全部" name="all">
      <AllTaskEditTable :taskItemId=this.taskItemId :taskItemName="this.taskItemName" :taskItemStatus="taskItemStatus"
                        :taskItemType="taskItemType" system="all"></AllTaskEditTable>
    </el-tab-pane>
    <el-tab-pane label="知识词条" name="knowledge">
      <AllTaskEditTable system="knowledge"></AllTaskEditTable>
    </el-tab-pane>
    <el-tab-pane label="知识规则" name="calc">
      <AllTaskEditTable system="calc"></AllTaskEditTable>
    </el-tab-pane>
    <el-tab-pane label="流程图" name="flowChart">
      <AllTaskEditTable ref="flowChart" system="flowChart"></AllTaskEditTable>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
  import AllTaskEditTable from "./AllTaskEditTable";

  export default {
    name: "TaskEditManage",
    components: {
      AllTaskEditTable,
    },
    data() {
      return {
        activeName: 'all',
        taskItemId: '',
        taskItemName: '',
        taskItemType: '',
        taskItemStatus: ''
      }
    },
    activated() {
      if (this.$route.meta.isUseCache) {
      }
      this.taskItemId = this.$route.query.taskItemId
      this.taskItemName = this.$route.query.taskItemName
      this.taskItemType = this.$route.query.taskItemType
      this.taskItemStatus = this.$route.query.taskItemStatus
      if (this.$route.query.activeName) {
        this.activeName = this.$route.query.activeName
      }
    },
    watch: {
      activeName(val) {
        val === 'flowChart' ? this.$refs.flowChart.addVisibilityChange() : this.$refs.flowChart.removeVisibilityChange()
      }
    },
    beforeRouteLeave(to, from, next) {
      this.$refs.flowChart.removeVisibilityChange()
      next()
    },
  }
</script>

<style scoped>

</style>
